<template>
    <div class="home-swipe">
        <van-search v-model="search" placeholder="请输入搜索关键词" input-align="center" @search="onSearch"/>
        <van-swipe class="my-swipe" :autoplay="3000"  indicator-color="white">
            <van-swipe-item v-for="item in bannerData" :key="item.id">
                <!-- <img :src="item.picUrl" alt=""/> -->
                <van-image :src="item.picUrl" lazy-load />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
// import { get } from 'core-js/core/dict';
import { Toast } from 'vant';
// import axios from 'axios';
export default{
    data(){
        return{
            search:'',
            bannerData: []
        };
    },
    created(){
        //页面还没有渲染，目前还不了解网页中有那些元素...获取"honm-swipe"是不可以
        this.getBanner();//由于是网络请求有延迟，所以不管getBanner方法中是否操作了template中的元素，都可以在此调用
    },
    methods:{
        //完成一个方法，实现网络请求轮播数据的功能
        getBanner(){
            this.$request('get','/recommend/banner')
                .then(res => {
                    // console.log(response.data)
                    console.log(res)
                    // let resData = response.data
                    if(res.result == 100){
                        this.bannerData = res.data
                        // console.log(this.bannerData);
                    }
                    
                })
                .catch(function(error){
                    console.log(error);
                });
        },
        onSearch(val) {
            Toast(val);
        }
        // onFocus(){

        // },
    },
    
    mounted(){
        //页面已完成渲染，已知到有那些网页元素...获取"honm-swipe"是可以的
        //this.getBanner();
    }

};
</script>
<style scoped>
</style>